<template>
  <span :class="cls" class="q-link cursor-hover text-bold" @click.stop="handleClick">
    <slot name="default"></slot>
  </span>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({ classes: String, disable: Boolean, textColor: String })
const emits = defineEmits(['click'])

const cls = computed(() => {
  const { classes = '', textColor = 'primary', disable = false } = props, cls = `${classes} text-${textColor}`
  return disable ? `${cls} q-link--disable cursor-not-allowed` : `${cls} cursor-pointer`
})
const handleClick = () => !props.disable && emits('click')
</script>